<script setup>
import { ref, reactive, onMounted, nextTick, watch, computed } from 'vue'
import Title from '@/components/title/title.vue'
import { Right, SetUp } from '@element-plus/icons-vue'


import { Swiper, SwiperSlide } from "swiper/vue";



import { getIndexBannerList } from '@/service/applyaudit/applyaudit.js'
import "swiper/css/pagination";

import "@/style/swiper.less";
import { Pagination, Mousewheel, Autoplay } from "swiper";
import {
  getActivityList4IndexApi,
  getArticleList4ArticleType,
  getMemberUnitListApi, getPreheatActivityListApi
} from "../../service/applyaudit/applyaudit";
import { useRouter } from 'vue-router'
const router = useRouter()

let noticeText = ref([])
let rotographList = ref([

])
let Isrotograph = ref(false)
const reviewImgList = ref([])
let activityList = ref([])
let newsImgList = ref([])
const announcementList = ref([])
const newsList = ref([])
const vipUnit = ref([])
let modules = ref([Pagination,Autoplay])
let noticetmodeles = ref([Pagination, Mousewheel, Autoplay])
let number = ref(0)

function moreClick(articleType) {
  router.push({ path: '/main/NewsList', query: { articleType: articleType } })
}
function moreNoticeClick(articleType) {
  router.push({ path: '/main/announcement', query: { articleType: articleType } })
}
function detaileClick(item) {
  console.log(item);
}
function activityTextClick(activityId) {
  router.push({ path: '/main/activitydetail', query: { activityId: activityId } })
}

function noticeTextClick(articleId) {
  router.push({ path: '/main/newItem', query: { articleId: articleId } })
}
function goUnitDetail(unitId) {
  router.push({ path: '/main/vipunitdetailed', query: { unitId: unitId } })
}
function getBannerList() {
  getIndexBannerList().then((resp) => {

    if (resp.data.code === 0) {
      rotographList.value = resp.data.result;
    } else {

    }
  });
}
function getInformList() {
  getArticleList4ArticleType('INFORM').then((resp) => {
    if (resp.data.code === 0) {
      noticeText.value = resp.data.result;
    } else {

    }
  });
}

function getNotifyList() {
  getArticleList4ArticleType('NOTICE').then((resp) => {
    if (resp.data.code === 0) {
      announcementList.value = resp.data.result.slice(0, 4);
    } else {

    }
  });
}
function getMemberUnitList() {
  getMemberUnitListApi().then((resp) => {
    if (resp.data.code === 0) {
      vipUnit.value = resp.data.result;
    } else {

    }
  });
}

function getActivityList4Index() {
  getActivityList4IndexApi().then((resp) => {
    if (resp.data.code === 0) {
      reviewImgList.value = resp.data.result.slice(0, 4);
    } else {

    }
  });
}
function getPreheatActivityList() {
  getPreheatActivityListApi().then((resp) => {
    if (resp.data.code === 0) {
      activityList.value = resp.data.result.slice(0, 4);
    } else {

    }
  });
}


function getnav(index, articleType) {
  getArticleList4ArticleType(articleType).then((resp) => {
    resp = resp.data;
    if (resp.code === 0) {
      if (resp.result) {
        let result = resp.result;
        newsList.value = [];
        newsImgList.value = [];
        for (let i = 0; i < result.length; i++) {
          if (result[i].pushStatus == '0') {

            if (result[i].indexMainFlag == '0') {
              newsImgList.value.push(result[i]);
            } else {
              if (newsList.value.length < 8)
                newsList.value.push(result[i]);
            }
          }
        }
      } else {

      }
    } else {

    }
  });
}


onMounted(() => {
  getBannerList();
  getNotifyList();
  getInformList();
  getnav();
  getMemberUnitList();
  getActivityList4Index();
  getPreheatActivityList();

})

</script>

<template>
  <div>
    <div class="banner">
      <!-- <img src="@/assets/img/bbb.png" alt=""> -->
      <swiper :pagination="{ dynamicBullets: true, }"
              :autoplay="{ delay: 3000, disableOnInteraction: false }" :modules="modules" class="mySwiper">
        <template v-for="(item, index) in rotographList" :key="item.id">
          <swiper-slide>
            <a :href="item.linkTarget" :target="item.linkType == '0' ? '_blank' : '_self'">
              <img :src="item.bannerImg" alt="">
            </a>
          </swiper-slide>
        </template>
      </swiper>
    </div>
    <div class="notice">
      <div class="content-grid">
        <div>
        </div>
        <div class="context">
          <div class="text"><span>最近通知</span> </div>
          <div class="noticetext">
            <!-- {{ noticeText }} -->
            <!-- <template> -->
            <swiper :direction="'vertical'" :slidesPerView="1" :spaceBetween="30" :mousewheel="true"
              :autoplay="{ delay: 1000, disableOnInteraction: false }" :modules="noticetmodeles" class="">
              <template v-for="(item, index) in noticeText" :key="item.articleId">
                <swiper-slide @click="noticeTextClick(item.articleId)" class="silideBgc">{{ item.articleTitle }}</swiper-slide>
              </template>
            </swiper>
            <!-- </template> -->
          </div>
        </div>

      </div>
    </div>
    <div class="box1">
      <!-- 活动预告 -->
      <div class="event-preview">
        <div class="preview-img">
          <img src="@/assets/img/EventPreview.png" alt="">
        </div>
        <div class="preview-msg">
          <!-- <img src="@/assets/img/activity.png" alt=""> -->
          <swiper :pagination="{ dynamicBullets: true, }" :modules="modules" :autoplay="{ delay: 1000, disableOnInteraction: false }" class="mySwiper">
            <template v-for="(item, index) in activityList" :key="item.activityId">
              <swiper-slide><img style="cursor: pointer" @click="activityTextClick(item.activityId)" :src="item.advanceNoticeImage" alt="">
                <span class="time">时间：{{ item.activityBeginTime + '~' + item.activityEndTime }}</span>
              </swiper-slide>
            </template>
          </swiper>
        </div>

      </div>
      <!-- 往期回顾 -->
      <div class="previous-review">
        <Title :title="'Previous review'" :text="'往期回顾'"></Title>
        <div class="reviewImg">
          <template v-for="(item, index) in reviewImgList" :key="item.activityId">
            <div class="reviewImgItem" @click="activityTextClick(item.activityId)">
              <img :src="item.coverImage" alt="">
              <div class="overlay">
                <h2>{{ item.activityName }}</h2>
                <el-button type="primary" round>{{ item.activityBeginTime + '~' + item.activityEndTime }}</el-button>
                <p>{{ item.activityBrief }}</p>
              </div>
            </div>
          </template>
        </div>

      </div>
    </div>
    <!-- 公告 -->
    <div class="box2">
      <div class="Announcement-box">
        <Title :title="'Announcement'" :text="'公告'" :more="true" @moreClick="moreNoticeClick('NOTICE')"></Title>

        <div class="announcementMsg">
          <template v-for="(item, index) in announcementList" :key="item.articleId">
            <div class="announcement-item" @click="noticeTextClick(item.articleId)">
              <div class="time">{{ item.titleTime }}</div>
              <div class="title">{{ item.articleTitle }}</div>
              <span class="context">{{ item.outline }}</span>
              <span class="next">

                <el-icon color="#1891FF">
                  <Right />
                </el-icon></span>

            </div>
          </template>
        </div>
      </div>

    </div>

    <!-- 新闻 -->
    <div class="box3">
      <Title :title="'News'" :text="'新闻资讯'" :more="true" @moreClick="moreClick('INFORMATION')"></Title>
      <div class="information">
        <div class="image">
          <!-- <img src="@/assets/img/nes.png" alt=""> -->
          <swiper :pagination="{ dynamicBullets: true, }" :modules="modules" class="mySwiper">
            <template v-for="(item, index) in newsImgList" :key="item.articleId">
              <swiper-slide>
                <img style="cursor: pointer" :src="item.coverImage" alt="" @click="noticeTextClick(item.articleId)">
                <div class="detailedMsg">
                  <div class="context">{{ item.outline }}</div>
                  <div class="icon" @click="detaileClick(item.articleId)"><el-icon color="#fff">
                      <Right />
                    </el-icon></div>
                </div>
              </swiper-slide>
            </template>
          </swiper>
        </div>
        <div class="information-item">
          <template v-for="(item, index) in newsList" :key="item.articleId">
            <div class="news-item" @click="noticeTextClick(item.articleId)">
              <div>{{ item.articleTitle }}</div>
              <div>{{ item.titleTime }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 会员单位 -->
    <div class="box4">
      <div class="unit-box">
        <div class="unitText">会员单位</div>
        <div class="vipunit">
          <template v-for="(item, index) in vipUnit" :key="item.unitId">
            <div class="unitMsg" @click="goUnitDetail(item.unitId)">
              <div class="unit-icon">
                <img :src="item.unitLogo" alt="">
              </div>
              {{ item.unitName }}
            </div>
          </template>
        </div>
      </div>


    </div>
  </div>
</template>

<style lang="less" scoped>
.banner {
  width: 1920px;
  height: 580px;

  background-color: #eee;
  overflow: hidden;

  .mySwiper {

    a {
      width: 100%;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: unset;
    }
  }

}

.notice {
  width: 100%;
  height: 64px;
  background: #1891FF;


  .content-grid {
    display: grid;
    grid-template-columns: 0.4fr 2fr;
    height: 100%;

    .context {
      display: flex;
      align-items: center;


      .text {
        width: 48px;
        height: 48px;
        background: #FFFFFF;
        border: 1px solid #FFFFFF;
        border-radius: 5px;
        margin-right: 20px;
        // padding: 8px 0 0 7px;
        font-size: 20px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        color: #1891FF;
        line-height: 18px;

        >span {
          margin: 5px 0 0 4px;
          display: inline-block;
        }
      }

      .noticetext {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 13px;
        height: 64px;
        width: 70%;
        cursor: pointer;

        :hover {
          text-decoration: underline;
        }

        .silideBgc {
          background-color: #1891FF;
        }
      }
    }

  }

}

.box1 {
  // margin: 0 auto;
  background-color: #fff;
  // padding: 48px 7.8%;
  width: 1500px;
  margin: 48px auto 0;

  .event-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    .preview-img {
      width: 23%;
      height: 210px;
      // background-color: red;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .preview-msg {
      width: 80%;
      height: 210px;
      background: #E9F9FB;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .time {
        position: absolute;
        right: 100px;
        bottom: 13px;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
      }
    }
  }

  .previous-review {
    margin-top: 48px;

    .reviewText {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ABABAB;
      line-height: 24px;
    }

    .issuereview {
      margin: 11px 0 22px 0;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1A1A1A;
    }

    .reviewImg {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-right: -20px;

      .reviewImgItem {
        width: 25%;
        height: 240px;
        // background-color: red;
        margin-right: 20px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .overlay {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          color: white;
          visibility: hidden;
          opacity: 0;
          transition: visibility 0s, opacity 0.5s linear;

        }

      }

      .reviewImgItem:hover .overlay {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

.box2 {
  background-color: #F7F9FA;
  height: 473px;
  margin: 48px auto 0;

  .Announcement-box {
    width: 1500px;
    margin: 0 auto;
    height: 100%;
    padding-top: 48px;

    .announcement {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ABABAB;
      line-height: 24px;
    }

    .announcementTitle {
      position: relative;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1A1A1A;

      .more {
        position: absolute;
        right: 0;
        top: -10px;
        display: inline-block;
        background: rgba(247, 249, 250, 0);
        border: 1px solid #1891FF;
        border-radius: 15px;
        padding: 4px 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1891FF;
        line-height: 24px;
        cursor: pointer;
      }
    }



    .announcementMsg {
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-right: -30px;

      .announcement-item {
        cursor: pointer;
        position: relative;
        width: 33.33%;
        height: 214px;
        margin-right: 30px;
        background-color: #fff;
        padding: 40px;

        .time {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ABABAB;
          line-height: 30px;
        }

        .title {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1A1A1A;
          line-height: 30px;
        }

        .context {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #787878;
          line-height: 30px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          line-clamp: 2;
          -webkit-line-clamp: 4;
        }

        .next {
          position: absolute;
          bottom: 40px;
          right: 40px;
        }
      }
    }
  }

}

.box3 {

  // background-color: #F7F9FA;
  width: 1500px;
  margin: 48px auto 0;

  .newsText {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ABABAB;
    line-height: 24px;
  }

  .news {
    width: 121px;
    height: 29px;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1A1A1A;
  }

  .information {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .image {
      width: 690px;
      height: 390px;
      // background-color: red;

      img {
        width: 100%;
        height: 100%;
      }

      .detailedMsg {
        position: absolute;
        bottom: 0;
        color: #fff;
        height: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.6);
        justify-content: space-between;

        .context {
          width: 580px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 24px;
          margin-left: 10px;
          overflow: hidden; //超出隐藏
          text-overflow: ellipsis; //超出使用省略号
          display: -webkit-box;
          -webkit-line-clamp: 2; //第几行
          -webkit-box-orient: vertical;
        }

        .icon {
          margin-right: 10px;
          width: 64px;
          height: 24px;
          background: rgba(1, 52, 140, 0);
          border: 1px solid #DEDFE0;
          border-radius: 12px;
          line-height: 12px;
          cursor: pointer;

          .el-icon {
            vertical-align: -webkit-baseline-middle;
          }
        }

      }
    }

    .information-item {
      width: 780px;
      height: 390px;

      .news-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 24px;
        border-bottom: 1px dashed #DBDBDB;
        height: 48px;
        padding: 0 10px;
        color: #777778;
        cursor: pointer;

      }

      :hover {

        color: #1891FF;
        background: #F5F6F7;
        border-radius: 6px;
      }

      :last-child {
        border: none;
      }

    }
  }

}

.box4 {
  background-color: #F7F9FA;
  height: 473px;
  margin: 48px auto 0;

  .unit-box {
    width: 1500px;
    margin: 0 auto;
    height: 100%;
    padding-top: 48px;

    .unitText {
      text-align: center;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      margin-bottom: 25px;
    }

    .vipunit {
      display: grid;
      grid-template-columns: repeat(6, 249px);
      grid-template-rows: repeat(3, 104px);
      background-color: #E1E3E6;
      width: max-content;
      grid-gap: 1px;

      .unitMsg {
        text-align: center;
        cursor: pointer;

        .unit-icon {
          margin: 22px auto 17px;
          width: 140px;
          height: 32px;
          // background-color: red;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }


    }

    .vipunit>* {
      background-color: #fff;
    }
  }


}
</style>
